.loading {
    @keyframes loading-fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes loading-fade-out {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: transparent;
    z-index: 20001;

    &.fadeIN-loading {
        animation: loading-fade-in 0.3s;
    }

    &.fadeOUT-loading {
        animation: loading-fade-out 0.3s;
    }

    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        // min-width: 70px;
        // min-height: 70px;
        padding: 5px;

        .loadingIcon {
            @keyframes rotate {

                100% {
                    transform: rotate(1440deg);
                }
            }

            font-size:35px;
            transform: rotateZ(0);
            display: flex;
            justify-content: center;
            align-items: center;
            animation: rotate 12s infinite linear;
        }

        .text {
            display: block;
            margin: 5px auto;
            text-align: center;
            font-size: 14px;
        }
    }


}